<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="40%" :title="`当家币充值`">
    <el-form ref="ruleFormRef" :model="dialogData.itemInfo" label-width="100px" label-suffix=" :">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="info-title">快速充值入口</div>
        </el-col>
      </el-row>
      <div class="charge-box-wrapper">
        <div class="charge-wrapper">
          <div class="note-box">
            <el-alert
              title="充值说明"
              type="success"
              description="请选择以下快速充值金额，或输入其它金额"
              show-icon
              :closable="false"
            />
          </div>
          <div class="charge-box">
            <div v-for="(item, index) in dialogData.chargeAtys" :key="index" class="charge-item-box">
              <div class="charge-item-info">
                <div class="charge-item-title">{{ item.superTitle }}</div>
                <div class="charge-item-gift">
                  赠送:
                  <span class="charge-item-gift-cnt">{{ item.giveCnt }}</span>
                </div>
              </div>
              <div class="charge-item-opt">
                <el-button class="charge-item" @click="handleCharge(item.id, item.chargeCnt)">
                  充{{ item.chargeCnt }}&nbsp;得{{ item.showCnt }}
                </el-button>
              </div>
            </div>
          </div>
          <div v-if="false">
            <el-form-item label="其它金额" >
              <el-input v-model="dialogData.itemInfo.chargeCnt"> </el-input>
            </el-form-item>
          </div>
        </div>

        <div class="pay-box">
          <div>
            <el-form-item label="支付金额">
              <el-input v-model="dialogData.itemInfo.chargeCnt"> <template #append>元</template></el-input>
            </el-form-item>
          </div>
          <div class="qrcode-box">
            <el-radio-group v-model="payMode" class="opt-item" @change="handlePayModeChange">
              <el-radio label="1" size="large" border>微信支付</el-radio>
              <el-radio label="2" size="large" disabled border>支付宝</el-radio>
            </el-radio-group>
            <div class="qrcode-item">
              <el-empty v-if="!showQrQode" :image-size="100" description="请扫码支付,请在30分钟完成支付" />
              <QrcodeVue v-if="showQrQode && payMode == '1'" :value="payUrl" :size="200"></QrcodeVue>
              <div v-if="showQrQode && payMode == '2'">
                <iframe src="./zfb.html" frameborder="0" class="full-iframe"></iframe>
              </div>
            </div>
            <div class="note-item">
              <el-button type="primary" :icon="Refresh" @click="handleRefreshPayUrl">刷新支付二维码</el-button>
            </div>
          </div>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="info-title">充值说明</div>
        </el-col>
      </el-row>
      <div class="activity-box-wrapper">
        当家币可用于发布岗位，下载工友简历等作用.你可使用微信或支付宝充值，与客户服务联系发票事宜。
      </div>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="btnLoading">确定充值</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { companyChargeActivityApi, companyChargeApi, companyChargeUrlApi } from "@/api/modules/cpy/act";
import { CompanyChargeEntity } from "@/biz/interface/CompanyType";
import QrcodeVue from "qrcode.vue";
import { Refresh } from "@element-plus/icons-vue";

//页面的数据
interface UserDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  chargeAtys: any[];
  //当前的数据对象
  itemInfo: CompanyChargeEntity;
}

//提交按钮，避免多次提交
const btnLoading = ref(false);
// 弹出框的参数
const dialogVisible = ref(false);
const dialogData = reactive<UserDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  chargeAtys: [],
  itemInfo: {}
});

//显示扫码支付的二维码
const showQrQode = ref(false);
const payMode = ref("1");
const payUrl = ref("");

// 接收父组件传过来的参数
const acceptParams = (params: DialogParam): void => {
  dialogData.optType = params.optType;
  dialogVisible.value = true;

  showQrQode.value = false;
  payUrl.value = "";
  dialogData.itemInfo = {};
};

const handleCharge = (atyId: number, val: number) => {
  dialogData.itemInfo.activityId = atyId;
  dialogData.itemInfo.chargeCnt = val;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  btnLoading.value = true;
  ruleFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }
    try {
      if (dialogData.itemInfo.chargeCnt) {
        //提交数据
        let res = await companyChargeApi({
          ...dialogData.itemInfo
        });
        if (res.data) {
          ElMessage.success({ message: `订单已生成，请扫码支付！` });
          dialogData.itemInfo.id = res.data;
          // 生成支付二维码
          genPayUrl();

          //刷新列表数据
          // emits("refresh-list");
          // dialogVisible.value = false;
        }
      } else {
        ElMessage.error({ message: `请选择要充值的金额！` });
      }
    } catch (error) {
      // console.log(error);
    } finally {
      btnLoading.value = false;
    }
  });
};

//刷新支付二维码
const handleRefreshPayUrl = () => {
  genPayUrl();
};

//变化支付方式
const handlePayModeChange = () => {
  genPayUrl();
};

// 订单生成， id是订单的主键。 在一次调用获取支付二维码
const genPayUrl = async () => {
  if (dialogData.itemInfo.id) {
    let res = await companyChargeUrlApi({
      chargeId: dialogData.itemInfo.id,
      payMode: payMode.value
    });

    if (res) {
      showQrQode.value = true;
      payUrl.value = res.data || false;
    }
  } else {
    ElMessage.success("请先点击确认充值，生成充值订单.");
  }
};

//获取充值活动列表
onMounted(async () => {
  let { data } = await companyChargeActivityApi({});
  // console.log("接收到服务器的充值活动列表", data);
  dialogData.chargeAtys = data?.list || [];
});

//页面事件
// const emits = defineEmits(["refresh-list"]);

//页面参数
defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.charge-box-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;

  .charge-wrapper {
    // border: 1px solid red;

    width: 50%;

    .note-box {
      margin: 10px 0;
      padding-left: 10px;
    }

    .charge-box {
      // border: 1px solid red;
      height: 300px;
      width: 100%;
      border-radius: 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // align-items: center;

      .charge-item {
        width: 160px;
        height: 60px;
      }

      .charge-item:nth-child(1) {
        margin-left: 10px;
      }
    }
  }

  .pay-box {
    // border: 1px solid red;
    flex: 1;
    margin-left: 10px;
  }
}

.activity-box-wrapper {
  border: 1px solid var(--el-color-primary-light-7);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 10px;
}

.pay-box {
  // border: 1px solid red;
  flex: 1;
  margin-left: 10px;
  height: 360px;

  .qrcode-box {
    // border: 1px solid red;
    // height: 100%;
    display: flex;
    flex-direction: column;
    .opt-item {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .qrcode-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
      width: 100%;
    }
    .note-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 30px;
      line-height: 30px;
      font-size: 0.9rem;
      color: var(--el-color-primary-light-4);
      font-weight: 600;
    }
  }
}

.charge-item-box {
  // border: 1px solid red;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  .charge-item-info {
    // border: 1px solid green;
    display: flex;
    justify-content: space-between;

    .charge-item-title {
      border: 2px solid var(--el-color-primary-light-4);
      border-radius: 5px;
      padding: 3px;
      font-size: 0.8em;
      font-weight: 600;
      transform: translateX(10px) translateY(12px);
    }

    .charge-item-gift {
      font-size: 0.8em;
      font-weight: 400;
      color: var(--el-color-info);
      line-height: 20px;

      .charge-item-gift-cnt {
        font-size: 1.2em;
        font-weight: 600;
        color: red;
      }
    }
  }

  .charge-item-opt {
    // border: 1px solid green;
    margin: 5px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
